<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'proj4leaflet';
import 'leaflet.vectorgrid';

// 引入 protobuf 库
// import protobuf from 'protobufjs';


export default {
  name: 'MapDemo',
  mounted() {

    // 创建 Leaflet 地图对象
    const map = L.map('map', {
      center: [22.96166, 113.22906], // 设置地图中心点
      zoom: 15, // 设置地图缩放级别,
      maxZoom: 22
    })



    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: '&copy; <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 22,
      id: 'mapbox/streets-v11',
      tileSize: 256,
      accessToken: 'pk.eyJ1Ijoibm9ydGh2aSIsImEiOiJjbGVydjV6YWkwMGFhNDFudG14ZXU3MXM3In0.o6cCmMVC4u7jsSQeN9BNiQ'
    }).addTo(map);

    // L.tileLayer('http://localhost:9999/geoserver/gwc/service/tms/1.0.0/zhouweijun%3Aps_line_3857@EPSG%3A900913@png/{z}/{x}/{y}.png', {
    //   tms: true,
    //   attribution: 'My Geoserver TMS Layer',
    //   maxZoom:20
    // }).addTo(map);


    var vectorTileOptions = {
      tms:true,
      rendererFactory: L.canvas.tile,
      vectorTileLayerStyles: {
        mylayer: function () {
          return {
            weight: 2,
            color: 'red'
          };
        }
      },
      interactive: true,
      getFeatureId: function (feature) {
        return feature.properties.id;
      }
    };

    L.vectorGrid.protobuf('http://localhost:9999/geoserver/gwc/service/tms/1.0.0/zhouweijun%3Aps_line_3857@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf', vectorTileOptions).addTo(map);



    map.on('click', function (e) {
      console.log(`您点击的位置坐标为：${e.latlng}`);
    });
  },
}
</script>

<style scoped>
#map {
  width: 100%;
  height: 100vh;
}
</style>
